const name = '小米'
const getName = () => {
  return name + '得到了函数值'
}

const isLogin = true

const list = [
  { id: 1001, name: 'Vue' },
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' }
]

let articleType = 1  // 0 1 3
const getTem = () => {
  if (articleType === 0) {
    return <h2>我是00</h2>
  } else if (articleType === 1) {
    return <h2>我是01</h2>
  } else if (articleType === 2) {
    return <h2>我是02</h2>
  }
}

const fn = (a, b) => {
  console.log(a, b);
  articleType++
}
function App() {
  return (
    <div>
      <h1>react开始 01</h1>

      <h4>{'你好啊 小黎 我们可得努力了啊'}</h4>
      <h4>{name}</h4>
      <h4>{getName()}</h4>
      <h4>{new Date().getTime()}</h4>

      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>

      <div>{isLogin ? '真的' : '假的'}</div>
      <div>
        复杂的渲染：{getTem()}
      </div>

      <button onClick={e => fn('jack', e)}>点击</button>

    </div>
  )
}

export default App
